<template>
    <h2>日历的显示和热力轴子的</h2>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue';
let chart = ref();
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let icon = ``
    const buLing = (n) => {
        if (n < 10) {
            return '0' + n;
        } else {
            return n;
        }
    }
    const isLeapYear = (year) => {
        if (((year % 4) == 0) && ((year % 100) != 0) || ((year % 400) == 0)) {
            return 1;
        } else {
            return 0;
        }
    }
    const computedMonthData = (d) => {
        let date = new Date(d);
        let year = date.getFullYear();
        let days = ([31, 28 + isLeapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]);
        let month = date.getMonth();
        let monthDays = days[month];
        let YYMM = `${year}-${buLing(month + 1)}`;
        let seriesDatas = [];
        for (let i = 1; i <= monthDays; i++) {
            let seriesData_value = [
                `${YYMM}-${buLing(i)}`,
                i * 10
            ]
            let seriesData = {
                value: seriesData_value,
            }
            seriesDatas.push(seriesData)
        }
        return {
            date: YYMM,
            data: seriesDatas
        }
    }
    let computedRes = computedMonthData(new Date());
    let data = computedRes.data;
    let rangeDate = computedRes.date;
    let option = {
        visualMap: {
            show: true,
            min: 0,
            max: 31 * 10,
            calculable: true,
            seriesIndex: [0],
            orient: 'horizontal',
            left: 'center',
            bottom: 20,
            inRange: {
                color: ['#e0ffff', '#006edd'],
                opacity: 1
            },
            controller: {
                inRange: {
                    opacity: 1
                }
            }
        },
        calendar: [
            {
                left: 'center',
                top: '20%',
                cellSize: [60, 80],
                yearLabel: { show: false },
                orient: 'vertical',
                // 设置每一项的样式
                itemStyle: {
                    // 加一个透明色用于间距；后面每个块的ric宽高 根据 cellSize 相减
                    borderColor: 'rgba(0,255,255,0)',
                    borderWidth: 10,
                },
                // 隐藏外侧的黑线
                splitLine: {
                    show: false
                },
                dayLabel: {
                    firstDay: 1,
                    nameMap: 'cn',
                    fontSize: 18,
                },
                monthLabel: {
                    show: false
                },
                // 这里要加上
                range: rangeDate
            }
        ],
        series: [
            {
                type: 'heatmap',
                coordinateSystem: 'calendar',
                symbolSize: 0,
                data: data,
                selectedMode: 'single',
                // 改用select
                select: {
                    itemStyle: {
                        borderColor: "red",
                        borderWidth: 4
                    },
                    label: {
                        show: true,
                        color: "#333",
                        formatter: (fparam) => {
                            let d = new Date(fparam.value[0]).getDate();
                            let drich = buLing(d);
                            return `{d|${drich}}\n{z|${fparam.value[1]}}`
                        },
                        rich: {
                            d: {
                                width: 46,
                                height: 33,
                                color: "#fff",
                                align: 'center',
                                backgroundColor: '#333',
                            },
                            z: {
                                width: 50,
                                height: 33,
                                align: 'center',
                                backgroundColor: 'rgba(255,255,255,0)',
                                color: "yellow"
                            }
                        }
                    }
                },
                label: {
                    show: true,
                    color: "#333",
                    formatter: (fparam) => {
                        let d = new Date(fparam.value[0]).getDate();
                        let drich = buLing(d);
                        return `{d|${drich}}\n{z|${fparam.value[1]}}`
                    },
                    rich: {
                        d: {
                            width: 50,
                            height: 35,
                            color: "#fff",
                            align: 'center',
                            backgroundColor: '#333'
                        },
                        z: {
                            width: 50,
                            height: 35,
                            align: 'center',
                            backgroundColor: 'rgba(255,255,255,0)',
                            color: "yellow"
                        }
                    }
                },

            }
        ]
    };
    myChart.setOption(option);

    // myChart.on('click', (cparam) => {
    //    let newData = [];
    //    let clickData = cparam.data;
    //    data.map((item) => {
    //       delete item.label;
    //       delete item.itemStyle;
    //       if (clickData.value[0] == item.value[0]) {
    //          item.itemStyle = {
    //             borderWidth: 4,   //设置这个需要在 rich内对应修改宽和高度
    //             borderColor: 'red',
    //             // color:{        //可以设置图片
    //             //    image:icon
    //             // }
    //          }
    //       }
    //    })
    //    myChart.setOption({
    //       animation: false,
    //       series: {
    //          data: data
    //       }
    //    })
    // })
}
onMounted(() => {
    initChart();
})
</script>

<style scoped>
.chart {
    width: 600px;
    height: 600px;
}
</style>